<template>
  <div class="pagination">
    <button
      :class="currentPage == 1 ? 'btn' : ''"
      @click="handleClick(currentPage - 1)"
      class="pagination-btn"
    >
      &lt;
    </button>
    <ul class="pagination-ul">
      <li @click="handleClick(1)" :class="currentPage == 1 ? 'active' : ''">
        1
      </li>
      <li
        v-show="totalPage > 7 && currentPage > 4"
        @click="handleClick(currentPage - 5)"
        @mouseover="isShow = false"
        @mouseout="isShow = true"
      >
        <span v-if="isShow" class="pagination-dian">&hellip;</span>
        <span v-else>&laquo;</span>
      </li>
      <li
        @click="handleClick(item)"
        :class="currentPage == item ? 'active' : ''"
        v-for="(item, index) in pages"
        :key="index"
      >
        {{ item }}
      </li>
      <li
        v-show="totalPage > 7 && currentPage < this.totalPage - 3"
        @click="handleClick(currentPage + 5)"
        @mouseover="isShow1 = false"
        @mouseout="isShow1 = true"
      >
        <span v-if="isShow1" class="pagination-dian">&hellip;</span>
        <span v-else>&raquo;</span>
      </li>
      <li
        @click="handleClick(totalPage)"
        :class="currentPage == totalPage ? 'active' : ''"
      >
        {{ totalPage }}
      </li>
    </ul>
    <button
      :class="currentPage == totalPage ? 'btn' : ''"
      @click="handleClick(currentPage + 1)"
      class="pagination-btn"
    >
      &gt;
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    "page-size": {
      type: Number,
      default: 5,
    },
    total: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      isShow: true,
      isShow1: true,
    };
  },
  methods: {
    handleClick(page) {
      if (page < 1) {
        page = 1;
      }
      if (page > this.totalPage) {
        page = this.totalPage;
      }
      this.$emit("current-change", page);
    },
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    pages() {
      let start = this.currentPage - 2;
      let end = this.currentPage + 2;
      let arr = [];
      if (start < 2) {
        start = 2;
      }
      if (end - start < 4) {
        end = start + 4;
      }
      if (end > this.totalPage - 1) {
        end = this.totalPage - 1;
      }
      if (end - start < 4) {
        start = end - 4;
      }
      if (start < 2) {
        start = 2;
      }
      for (let i = start; i <= end; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.pagination {
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}

.pagination-ul {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  padding: 0;
  margin: 0;
}

.pagination-ul li {
  margin: 0 5px;
  min-width: 30px;
  border-radius: 2px;
  padding: 0 4px;
  vertical-align: top;
  font-size: 13px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  text-align: center;
  background-color: #f4f4f5;
  color: #606266;
}

.pagination-dian {
  margin-top: -8px;
}

.pagination-ul li:hover {
  color: #409eff;
}

.pagination-ul li span {
  text-align: center;
  font-size: 16px;
}

.pagination-btn {
  outline: none;
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
  background-size: 16px;
  cursor: pointer;
  border: none;
  display: inline-block;
  font-size: 16px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  box-sizing: border-box;
}

.btn {
  cursor: no-drop;
}

.active {
  background-color: #409eff !important;
  color: #fff !important;
}
</style>
